<template>
  <div>
    <div class="header_search_nav search_form">
      <div class="ipt_left">
        <el-form ref="queryForm" :model="queryParams" label-width="80px">
          <el-row>
            <!-- <el-col :span="6">
              <div class="timebox">
                <el-form-item label="名称" prop="categoryName">
                  <el-input
                    v-model="queryParams.categoryName"
                    class="w-100"
                    placeholder="请输入名称"
                  />
                </el-form-item>
              </div>
            </el-col> -->
            <el-col :span="6">
              <el-form-item label="类目类型" prop="categoryType">
                <el-select
                  class="w-100"
                  v-model="queryParams.categoryType"
                  placeholder="请选择"
                  @change="getListPage"
                >
                  <el-option
                    v-for="item in categoryTypeList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="类目" prop="categoryId">
                <el-select
                  v-model="queryParams.categoryId"
                  placeholder="请选择"
                  class="w-100"
                  @change="getList"
                >
                  <el-option
                    v-for="item in categoryArry"
                    :key="item.categoryId"
                    :label="item.categoryName"
                    :value="item.categoryId"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="归属类型" prop="categoryMoneyType">
                <el-select
                  v-model="queryParams.categoryMoneyType"
                  placeholder="请选择"
                  @change="getList"
                  class="w-100"
                >
                  <el-option
                    v-for="item in categoryMoneyTypeList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="6" v-if="queryParams.categoryMoneyType === 'U'">
              <el-form-item label="用户" prop="categoryMoneyObject">
                <el-select
                  v-model="queryParams.categoryMoneyObject"
                  placeholder="请输入搜索用户"
                  class="w-100"
                  filterable
                  remote
                  reserve-keyword
                  :remote-method="remoteMethod"
                  :loading="clientLoading"
                  @keyup.enter.native="getList"
                >
                  <el-option
                    v-for="item in ClientOptions"
                    :key="item.id"
                    :label="
                      item.nickname +
                      (!!item.stageName ? '（' + item.stageName + '）' : '')
                    "
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="6" v-if="queryParams.categoryMoneyType === 'S'">
              <div class="storeBox">
                <el-form-item label="门店" prop="categoryMoneyObject">
                  <el-select
                    v-model="queryParams.categoryMoneyObject"
                    placeholder="请选择"
                    class="w-100"
                    filterable
                    @change="getList"
                  >
                    <el-option
                      v-for="(item, index) in $store.state.user.stores"
                      :key="index"
                      :label="item.name"
                      :value="item.id"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </div>
            </el-col>

            <!-- <el-col :span="6">
              <el-form-item label="金额" prop="categoryMoney">
                <el-input
                  type="Number"
                  v-model="queryParams.categoryMoney"
                  class="w-100"
                  placeholder="请输入金额"
                />
              </el-form-item>
            </el-col> -->
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item label="时间" prop="dateType">
                <el-row type="flex" :gutter="12">
                  <el-col :span="6">
                    <el-select
                      class="w-100"
                      v-model="queryParams.dateType"
                      placeholder="请选择"
                      @change="changeDateType"
                    >
                      <el-option label="月" value="Y"> </el-option>

                      <el-option label="天" value="D"> </el-option>
                    </el-select>
                  </el-col>
                  <el-col :span="18">
                    <div v-show="queryParams.dateType === 'Y'">
                      <!-- <el-date-picker
                        v-model="queryParams.categoryMoneyMoon"
                        type="month"
                        class="w-100"
                        value-format="yyyy-MM"
                        placeholder="选择月"
                      >
                      </el-date-picker> -->
                      <el-date-picker
                        v-model="queryParams.categoryMoneyMoon"
                        type="monthrange"
                        class="w-100"
                        value-format="yyyy-MM"
                        range-separator="至"
                        start-placeholder="开始月份"
                        end-placeholder="结束月份"
                        @change="getList"
                      >
                      </el-date-picker>
                    </div>

                    <div v-show="queryParams.dateType === 'D'">
                      <el-date-picker
                        v-model="queryParams.categoryMoneyDay"
                        type="daterange"
                        class="w-100"
                        value-format="yyyy-MM-dd"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        @change="getList"
                      >
                      </el-date-picker>
                      <!-- <el-date-picker
                        v-model="queryParams.categoryMoneyDay"
                        type="date"
                        class="w-100"
                        value-format="yyyy-MM-dd"
                        placeholder="选择天"
                      >
                      </el-date-picker> -->
                    </div>
                  </el-col>
                </el-row>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="金额">
                <div class="MoneyBox">
                  <div>
                    <el-input-number
                      v-model="queryParams.startMoney"
                      :max="10000000000"
                      label="请输入"
                      :controls="false"
                      class="w-160 text-left"
                    ></el-input-number>
                  </div>
                  <div class="betweenIcon">~</div>
                  <div>
                    <el-input-number
                      v-model="queryParams.endMoney"
                      :max="10000000000"
                      label="请输入"
                      :controls="false"
                      class="w-160 text-left"
                    ></el-input-number>
                  </div>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>

      <div class="btn_right">
        <button class="btn1" @click="handleQuery">筛选</button>
        <button class="btn2" @click="resetQuery">重置</button>
      </div>
    </div>
    <div class="table_card">
      <div class="table_card_top">
        <span class="solid_left"></span>
        <div class="table_card_title">类目金额</div>
        <span class="totalSum">统计:{{ AllCategory }}</span>
        <div class="op_right">
          <button class="primary_button" @click="NewUser">类目金额</button>
          <el-button class="repeat" @click="handleImport">导入</el-button>
          <el-button type="primary" @click="DownloadTemplate"
            >下载模板</el-button
          >
          <el-button
            @click="handleExport"
            :loading="exportLoading"
            class="repeat"
            v-hasPermi="['order:category-money:page:exl']"
            >导出</el-button
          >
          <button class="primary_button" @click="DeleteBatch">批量删除</button>
        </div>
      </div>

      <div class="table_list">
        <el-table
          :data="categoryList"
          stripe
          style="width: 100%"
          @selection-change="handleSelectionChange"
          row-key="categoryMoneyId"
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column
            prop="categoryMoneyTypeDesc"
            label="归属类型"
            width="150px"
          >
          </el-table-column>
          <el-table-column prop="categoryPName" label="类目" width="150px">
          </el-table-column>
          <el-table-column prop="categoryName" label="子类目" width="150px">
          </el-table-column>
          <el-table-column prop="categoryMoneyObjectName" label="归属名称">
          </el-table-column>
          <el-table-column
            prop="categoryMoneyMoon"
            label="类目金额月"
            width="200px"
          >
          </el-table-column>
          <el-table-column
            prop="categoryMoneyDay"
            label="类目金额天"
            width="200px"
          >
          </el-table-column>
          <el-table-column prop="categoryMoney" label="类目金额">
          </el-table-column>
          <el-table-column prop="categoryMoneyDesc" label="类目金额备注">
          </el-table-column>

          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="mini" type="text" @click="edit(scope.row)"
                >编辑</el-button
              >

              <el-button size="mini" type="text" @click="Copy(scope.row)"
                >复制</el-button
              >

              <el-button size="mini" type="text" @click="DelUser(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <pagination
          :total="total"
          :page.sync="queryParams.pageNo"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </div>

      <!-- 新建类目金额 -->
      <el-dialog
        :visible.sync="categoryVisible"
        width="500px"
        :title="title"
        class="no-dialog-padding"
        @close="Canceluser"
      >
        <span>
          <div class="source_box">
            <el-form
              :model="CategoryForm"
              :rules="CategoryRules"
              ref="CategoryForm"
              label-width="100px"
              class="demo-ruleForm"
            >
              <el-form-item label="类目类型" prop="categoryType">
                <el-select
                  v-model="CategoryForm.categoryType"
                  placeholder="请选择"
                  class="w-100"
                  @change="FormchangeCategoryType"
                >
                  <el-option
                    v-for="item in categoryTypeList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="父类目" prop="categoryId">
                <!-- <el-select
                  v-model="CategoryForm.categoryId"
                  placeholder="请选择"
                  class="w-100"
                >
                  <el-option
                    v-for="item in FormcategoryArry"
                    :key="item.categoryId"
                    :label="item.categoryName"
                    :value="item.categoryId"
                  >
                  </el-option>
                </el-select> -->

                <treeselect
                  v-model="CategoryForm.categoryId"
                  :options="deptOptions"
                  :show-count="true"
                  :clearable="false"
                  placeholder="请选择类目"
                  :normalizer="normalizer"
                  :default-expand-level="1"
                />
              </el-form-item>
              <el-form-item label="归属类型" prop="categoryMoneyType">
                <el-select
                  v-model="CategoryForm.categoryMoneyType"
                  placeholder="请选择"
                  @change="FormChangeCategory"
                  class="w-100"
                >
                  <el-option
                    v-for="item in categoryMoneyTypeList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>

              <el-form-item
                label="用户"
                prop="categoryMoneyObject"
                v-if="CategoryForm.categoryMoneyType === 'U'"
              >
                <el-select
                  v-model="CategoryForm.categoryMoneyObject"
                  placeholder="请输入搜索用户"
                  class="w-100"
                  filterable
                  remote
                  reserve-keyword
                  :remote-method="FormremoteMethod"
                  :loading="clientLoading"
                >
                  <el-option
                    v-for="item in FormClientOptions"
                    :key="item.id"
                    :label="
                      item.nickname +
                      (!!item.stageName ? '（' + item.stageName + '）' : '')
                    "
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>

              <el-form-item
                label="门店"
                prop="categoryMoneyObject"
                v-if="CategoryForm.categoryMoneyType === 'S'"
              >
                <el-select
                  v-model="CategoryForm.categoryMoneyObject"
                  placeholder="请选择"
                  class="w-100"
                  filterable
                  @change="handleQuery"
                >
                  <el-option
                    v-for="(item, index) in $store.state.user.stores"
                    :key="index"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="月份" prop="categoryMoneyMoon">
                <el-row type="flex">
                  <el-col>
                    <div>
                      <el-date-picker
                        v-model="CategoryForm.categoryMoneyMoon"
                        type="month"
                        class="w-100"
                        value-format="yyyy-MM"
                        placeholder="选择月"
                      >
                      </el-date-picker>
                    </div>
                  </el-col>
                </el-row>
              </el-form-item>
              <el-form-item label="日期" prop="categoryMoneyDay">
                <el-row type="flex">
                  <el-col>
                    <div>
                      <el-date-picker
                        v-model="CategoryForm.categoryMoneyDay"
                        type="date"
                        class="w-100"
                        value-format="yyyy-MM-dd"
                        placeholder="选择天"
                      >
                      </el-date-picker>
                    </div>
                  </el-col>
                </el-row>
              </el-form-item>
              <el-form-item label="类目金额" prop="categoryMoney">
                <el-input-number
                  v-model="CategoryForm.categoryMoney"
                  :max="1000000"
                  :controls="false"
                  class="w-100 text-left"
                  :precision="2"
                ></el-input-number>
              </el-form-item>
              <el-form-item label="备注" prop="categoryMoneyDesc">
                <el-input v-model="CategoryForm.categoryMoneyDesc"></el-input>
              </el-form-item>
            </el-form>
          </div>
        </span>
        <span slot="footer" class="dialog-footer">
          <el-button class="cancel_btn" @click="Canceluser">取 消</el-button>
          <el-button
            type="primary"
            @click="userSubmit"
            :loading="CreateClienLoading"
            >确 定</el-button
          >
        </span>
      </el-dialog>

      <!-- 导入类目金额 -->
      <el-dialog
        title="导入类目金额"
        :visible.sync="upload.open"
        width="400px"
        append-to-body
      >
        <div v-loading="timeSetLoading || upload.isUploading">
          <el-upload
            ref="upload"
            :limit="1"
            :headers="upload.headers"
            :action="upload.url"
            :disabled="upload.isUploading"
            :on-progress="handleFileUploadProgress"
            :on-success="handleFileSuccess"
            :on-error="handleFileError"
            :auto-upload="false"
            name="file"
            :data="{}"
            drag
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">
              将文件拖到此处，或
              <em>点击上传</em>
            </div>

            <div class="el-upload__tip" slot="tip"></div>
          </el-upload>

          <div class="model-height">
            <el-form
              ref="uploadForm"
              size="mini"
              label-width="90px"
              :model="uploadForm"
              :rules="uploadRules"
              @submit.native.prevent
            >
              <!-- <el-form-item label="月份" prop="moon">
                  <el-date-picker
                    class="w-100"
                    v-model="uploadForm.moon"
                    type="month"
                    placeholder="选择月"
                    value-format="yyyy-MM"
                  >
                  </el-date-picker>
                </el-form-item>

                <el-form-item label="是否修改" prop="editStatus">
                  <div class="max-width-300">
                    <el-radio-group v-model="uploadForm.editStatus">
                      <el-radio label="N">新增</el-radio>
                      <el-radio label="Y">修改</el-radio>
                    </el-radio-group>
                  </div>
                </el-form-item> -->
            </el-form>
          </div>
        </div>

        <div slot="footer" class="dialog-footer">
          <el-button
            type="primary"
            :loading="timeSetLoading || upload.isUploading"
            @click="submitFileForm"
            >确 定</el-button
          >
          <el-button @click="uploadClose">取 消</el-button>
        </div>
      </el-dialog>

      <!-- 进度条 -->
      <el-dialog
        title="进度"
        :visible.sync="ProcessdialogVisible"
        width="30%"
        :before-close="ProcessClose"
      >
        <span>
          <el-progress :percentage="percentage"></el-progress>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  getCategoryAll,
  getCategoryAmountPage,
  CreateCategoryAmount,
  EditCategoryMoney,
  getCategoryAmount,
  DeleteCategoryAmount,
  getAllCategory,
  getTotalCategoryAmount,
  impFinish,
  impFinishDown,
  downloadTemp,
  DeleteCategoryAmountBatch,
} from "@/api/bpm/category";
import { CategoryMoneyPageExl } from "@/api/bpm/excle";
import { checkEnglish } from "@/utils/regular";
import { listUser } from "@/api/system/user";
import { listSimpleDepts } from "@/api/system/dept";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { getBaseHeader } from "@/utils/request";
export default {
  components: { Treeselect },
  name: "EryuoaStoreCategoryList",
  data() {
    return {
      uploadForm: {
        // moon: "",
        // editStatus: "N",
      },
      uploadRules: {
        // moon: [{ required: true, message: "请选择月份", trigger: "change" }],
      },
      title: "",
      // 遮罩层
      loading: false,
      // 用户导入参数
      upload: {
        // 是否显示弹出层（用户导入）
        open: false,
        // 弹出层标题（用户导入）
        title: "",
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的用户数据
        updateSupport: 0,
        // 设置上传的请求头部
        headers: getBaseHeader(),

        // 上传的地址
        url: "",
      },

      deptOptions: [], // 部门属性结构
      exportLoading: false,
      CategoryForm: {
        categoryName: "",
        categoryMoneyType: "",
        // storeId: "",
        categoryMoneyObject: "",
        categoryMoneyId: "",
        categoryMoneyObjectUser: {}, // 返回的信息 放到 FormClientOptions
        categoryMoneyObjectName: "",
        categoryType: "",
        categoryId: null,
        categoryMoney: "",
        categoryMoneyMoon: "",
        categoryMoneyDay: "",
        categoryMoneyDesc: "",
        // dateType: "Y",
      },
      CategoryRules: {
        categoryType: [
          { required: true, message: "请选择类目类型", trigger: "change" },
        ],

        categoryMoneyType: [
          { required: true, message: "请选择归属类型", trigger: "change" },
        ],
        categoryId: [{ required: true, message: "请选择类目" }],
        categoryMoneyMoon: [{ required: true, message: "请选择月" }],
        categoryMoney: [{ required: true, message: "请输入类目金额" }],
      },
      categoryVisible: false, // 新增收支类目
      categoryList: [], // 收支类目数据
      loading: false,
      title: "",
      total: 0,
      CreateClienLoading: false,
      // 查询参数
      queryParams: {
        categoryMoneyType: "",
        categoryMoneyObject: "",
        categoryMoneyType: "",
        categoryType: "",
        categoryId: "",
        categoryMoney: "",
        categoryMoneyMoon: [],
        categoryMoneyDay: [],
        dateType: "Y",
        pageNo: 1,
        pageSize: 10,
        startMoney: 0,
        endMoney: 10000,
      },
      // // 查询参数
      // queryParam: {
      //   pageNo: 1,
      //   pageSize: 10,
      // },

      categoryMoneyTypeList: [
        {
          value: "U",
          label: "用户",
        },
        {
          value: "S",
          label: "门店",
        },
      ],

      categoryTypeList: [
        {
          value: "D",
          label: "扣款",
        },
        {
          value: "P",
          label: "支出",
        },
        {
          value: "I",
          label: "收入",
        },
        {
          value: "U",
          label: "上月未收",
        },
        {
          value: "T",
          label: "本月未收",
        },
        {
          value: "C",
          label: "手续费",
        },
      ],

      seachUserClientTimeout: null,
      clientLoading: false,
      ClientOptions: [],
      FormClientOptions: [],
      categoryArry: [],
      FormcategoryArry: [],
      AllCategory: {},
      timeSetLoading: false,

      LoadingIcon: false,

      percentage: 0,
      ProcessdialogVisible: false,
      Process: null,

      multipleSelection: [], // 批量删除存放多选数据
      categoryIdArr: [], // 批量删除存放选中categoryId
    };
  },

  created() {
    this.getList();
    this.getAllCategoryList();
  },

  mounted() {},

  methods: {
    ProcessClose() {
      clearTimeout(this.Process);
      this.ProcessdialogVisible = false;
    },

    DownloadTemplate() {
      downloadTemp()
        .then((response) => {
          this.$download.excel(response, "类目金额导入模板.xls");
          this.$message({
            type: "success",
            message: "操作成功",
          });
        })
        .catch((err) => {});
    },
    uploadClose() {
      // 关闭弹窗
      this.upload.open = false;
      // 重置上传状态和文件
      this.upload.isUploading = false;
      this.$refs.upload.clearFiles();

      this.uploadForm.moon = "";
      this.uploadForm.editStatus = "N";
    },

    // 提交上传文件
    submitFileForm() {
      this.$refs["uploadForm"].validate((valid) => {
        if (valid) {
          const { moon, editStatus } = this.uploadForm;

          this.upload.url =
            process.env.VUE_APP_BASE_API +
            "/admin-api/order/category-money/import";
          this.$nextTick(() => {
            this.LoadingIcon = this.$loading({
              lock: true,
              text: "数据导入中",
              spinner: "el-icon-loading",
              background: "rgba(0, 0, 0, 0.7)",
            });
            this.$refs.upload.submit();
          });

          this.percentage = 0;
          this.ProcessdialogVisible = true;
          this.Process = setInterval(() => {
            this.percentage += 1;
            if (this.percentage >= 99) {
              clearTimeout(this.Process);
            }
          }, 1000);
        }
      });
    },
    /** 导入按钮操作 */
    handleImport() {
      this.upload.title = "用户导入";
      this.upload.open = true;
    },

    getListPage() {
      this.queryParams.categoryId = undefined;
      this.categoryArry = [];
      this.getList();
    },

    // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true;
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      console.log(response, "response676712121");

      if (response.code !== 0) {
        this.LoadingIcon.close();
        this.ProcessClose();
        this.upload.open = false;
        this.upload.isUploading = false;
        this.$refs.upload.clearFiles();

        this.$modal.msgError(response.msg);
        return;
      }

      this.upload.open = false;
      this.upload.isUploading = false;
      this.$refs.upload.clearFiles();

      this.timeSet = setInterval(() => {
        if (!this.timeSetLoading) {
          this.cx(response.data);
        }
      }, 1000);
    },

    handleFileError() {
      console.log("失败qwqw");
      this.LoadingIcon.close();
    },

    cx(token) {
      this.timeSetLoading = true;
      impFinish({
        token,
      })
        .then((response) => {
          this.timeSetLoading = false;
          const { code, data } = response;
          if (code === 0) {
            if (data === "Y") {
              this.getList();
              clearInterval(this.timeSet);
              this.$alert("", "导入结果" + response.msg);
              this.ProcessClose();
              this.getimpFinishDown(token);
              this.LoadingIcon.close();
            }
          } else {
            clearInterval(this.timeSet);
            this.$alert("", "导入结果" + response.msg);
            this.ProcessClose();
          }
        })
        .catch((e) => {
          this.timeSetLoading = false;
          clearInterval(this.timeSet);
          this.$alert("", "导入结果" + e.msg);
          this.ProcessClose();
        });
    },

    getimpFinishDown(token) {
      impFinishDown({
        token,
      })
        .then((response) => {
          this.$download.excel(response, "导入结果.xls");
        })
        .catch(() => {});
    },

    // 全部类目
    getAllCategoryList() {
      getAllCategory()
        .then((res) => {
          const { code, data } = res;
          if (code === 0) {
            this.FormcategoryArry = data;
          }
        })
        .catch((err) => {});
    },

    // 统计
    getAllCategoryTotal() {
      let params = JSON.parse(JSON.stringify(this.queryParams));
      if (!!params.categoryMoneyMoon && params.categoryMoneyMoon.length > 0) {
        params.startMoon = params.categoryMoneyMoon[0];
        params.endMoon = params.categoryMoneyMoon[1];
      }
      delete params.categoryMoneyMoon;

      if (!!params.categoryMoneyDay && params.categoryMoneyDay.length > 0) {
        params.startDate = params.categoryMoneyDay[0];
        params.endDate = params.categoryMoneyDay[1];
      }

      delete params.categoryMoneyDay;
      getTotalCategoryAmount(params)
        .then((res) => {
          const { code, data } = res;
          if (code === 0) {
            this.AllCategory = data;
          }
        })
        .catch((err) => {});
    },

    // 格式化部门的下拉框
    normalizer(node) {
      return {
        id: node.categoryId,
        label: node.categoryName,
        children: node.child,
      };
    },

    NewAddFranchisees() {
      // 获得全部类目数据
      this.deptOptions = [];
      getAllCategory({
        categoryType: this.CategoryForm.categoryType,
      }).then((response) => {
        // 处理 deptOptions 参数
        this.deptOptions = [];
        this.deptOptions = response.data;
      });
    },

    handleExport() {
      this.$modal
        .confirm("是否确认导出报表数据?")
        .then(() => {
          this.exportLoading = true;
          let queryParams = JSON.parse(JSON.stringify(this.queryParams));

          if (
            !!this.queryParams.categoryMoneyMoon ||
            !!this.queryParams.categoryMoneyDay
          ) {
            if (this.queryParams.dateType === "Y") {
              queryParams.startMoon = this.queryParams.categoryMoneyMoon[0];
              queryParams.endMoon = this.queryParams.categoryMoneyMoon[1];
            } else if (this.queryParams.dateType === "D") {
              queryParams.startDate = this.queryParams.categoryMoneyDay[0];
              queryParams.endDate = this.queryParams.categoryMoneyDay[1];
            }
          }
          delete queryParams.categoryMoneyMoon;
          delete queryParams.categoryMoneyDay;
          return CategoryMoneyPageExl(queryParams);
        })
        .then((response) => {
          this.$download.excel(response, "类目金额");
          this.exportLoading = false;
        })
        .catch(() => {
          this.exportLoading = false;
        });
    },

    handleSelectionChange(val) {
      this.multipleSelection = val;
      console.log("val", val);

      // console.log("multipleSelection", this.multipleSelection);

      let categoryIdList = [];

      for (let index = 0; index < val.length; index++) {
        const element = val[index];
        categoryIdList.push(element.categoryMoneyId);
      }

      this.categoryIdArr = categoryIdList;

      console.log(this.categoryIdArr, "dskjdskdjsk");
    },

    // 批量删除
    DeleteBatch() {
      if (!!this.multipleSelection && this.multipleSelection.length === 0) {
        this.$message({
          type: "error",
          message: "请先选择需要批量删除的类目金额数据",
        });
        return false;
      }

      this.$confirm("是否确认批量操作类目金额删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          DeleteCategoryAmountBatch({
            categoryMoneyId: this.categoryIdArr,
          })
            .then((Res) => {
              const { code } = Res;
              if (code === 0) {
                this.getList();
                this.getAllCategoryList();

                this.$message({
                  type: "success",
                  message: "操作成功!",
                });
              }
            })
            .catch((err) => {});
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    FormChangeCategory() {
      this.CategoryForm.categoryMoneyObject = "";
    },

    CheckEnglish(rule, value, callback) {
      if (!checkEnglish(value) && !!value) {
        callback(new Error("只能输入英文字母"));
      } else {
        callback();
      }
    },
    // 获取类目金额详情
    getCategorys(categoryMoneyId, businessType) {
      getCategoryAmount({
        categoryMoneyId: categoryMoneyId,
      })
        .then((res) => {
          const { code, data } = res;
          if (code === 0) {
            let FormData = JSON.parse(JSON.stringify(data));
            FormData.dateType = FormData.categoryMoneyDateType;
            if (!!FormData.categoryMoneyObjectUser) {
              this.FormClientOptions = [];
              this.FormClientOptions.push(FormData.categoryMoneyObjectUser);
            }

            this.CategoryForm = FormData;
            if (!!businessType) {
              this.CategoryForm.businessType = businessType;
            }
            this.NewAddFranchisees();
            this.$nextTick(() => {
              this.CategoryForm.categoryMoneyMoon = data.categoryMoneyMoon;
            });
          }
        })
        .catch((err) => {});
    },

    // 收支类目列表
    getList() {
      this.loading = true;
      let query = JSON.parse(JSON.stringify(this.queryParams));
      if (!!query.categoryMoneyMoon && query.categoryMoneyMoon.length > 0) {
        query.startMoon = query.categoryMoneyMoon[0];
        query.endMoon = query.categoryMoneyMoon[1];
      }
      delete query.categoryMoneyMoon;

      if (
        query.startMoney === "" ||
        query.startMoney === null ||
        query.startMoney === undefined
      ) {
        this.$message.error("开始金额不能为空");
        return false;
      }

      if (
        query.endMoney === "" ||
        query.endMoney === null ||
        query.endMoney === undefined
      ) {
        this.$message.error("结束金额不能为空");
        return false;
      }

      if (query.startMoney > query.endMoney) {
        this.$message.error("起始金额不能大于结束金额");
        return false;
      }

      if (!!query.categoryMoneyDay && query.categoryMoneyDay.length > 0) {
        query.startDate = query.categoryMoneyDay[0];
        query.endDate = query.categoryMoneyDay[1];
      }

      delete query.categoryMoneyDay;

      delete query.dateType;
      getCategoryAmountPage(query)
        .then((res) => {
          this.loading = false;
          const { code, data } = res;
          if (code === 0) {
            this.categoryList = data.list;
            this.total = data.total;
            this.getAllCategoryTotal();
            this.changeCategoryType();
          }
        })
        .catch((err) => {
          this.loading = false;
        });
    },

    Canceluser() {
      this.resetFormData("CategoryForm");
      this.CreateClienLoading = false;
      this.$nextTick(() => {
        this.categoryVisible = false;
      });
    },

    // 筛选
    handleQuery() {
      this.queryParams.pageNo = 1;
      this.getList();
      this.$nextTick(() => {
        this.getAllCategoryTotal();
      });
    },

    /** 重置按钮操作 */
    resetQuery() {
      this.resetFormData("queryForm");
      this.queryParams.categoryMoneyDay = "";
      this.queryParams.categoryMoneyMoon = "";
      this.queryParams.startMoney = "";
      this.queryParams.endMoney = "";
      this.handleQuery();
    },

    changeCategoryMoneyType() {
      this.queryParams.categoryMoneyObject = "";
    },

    changeCategoryType() {
      // this.queryParams.categoryId = "";
      this.NewAddFranchisees();
      getCategoryAll({
        pageNo: 1,
        pageSize: 20,
        categoryType: this.queryParams.categoryType,
      })
        .then((res) => {
          const { code, data } = res;
          if (code === 0) {
            this.categoryArry = data;
          }
        })
        .catch((err) => {});
    },

    FormchangeCategoryType() {
      this.CategoryForm.categoryId = undefined;
      this.NewAddFranchisees();
      getCategoryAll({
        pageNo: 1,
        pageSize: 20,
        categoryType: this.CategoryForm.categoryType,
      })
        .then((res) => {
          const { code, data } = res;
          if (code === 0) {
            this.FormcategoryArry = data;
          }
        })
        .catch((err) => {});
    },

    getalls() {
      getCategoryAll({
        pageNo: 1,
        pageSize: 20,
        categoryType: this.CategoryForm.categoryType,
      })
        .then((res) => {
          const { code, data } = res;
          if (code === 0) {
            this.FormcategoryArry = data;
          }
        })
        .catch((err) => {});
    },

    changeDateType() {
      this.queryParams.categoryMoneyMoon = "";
      this.queryParams.categoryMoneyDay = "";
    },

    clearType() {
      this.CategoryForm.categoryMoneyMoon = "";
      this.CategoryForm.categoryMoneyDay = "";
    },

    remoteMethod(query) {
      if (query !== "") {
        clearTimeout(this.seachUserClientTimeout);
        this.seachUserClientTimeout = setTimeout(() => {
          this.GetClientList(query, 0); // 0 =》 搜索框筛选 请求的值 1-》表单
        }, 500);
      } else {
        this.options = [];
      }
    },

    FormremoteMethod(query) {
      if (query !== "") {
        clearTimeout(this.seachUserClientTimeout);
        this.seachUserClientTimeout = setTimeout(() => {
          this.GetClientList(query, 1);
        }, 500);
      } else {
        this.options = [];
      }
    },

    GetClientList(query, type) {
      listUser({
        pageNo: 1,
        pageSize: 20,
        keyword: query,
      })
        .then((res) => {
          const { code, data } = res;
          if (code === 0) {
            if (type === 0) {
              this.ClientOptions = data.list;
            } else if (type === 1) {
              this.FormClientOptions = data.list;
            }
          }
        })
        .catch((err) => {});
    },

    // 确定
    userSubmit() {
      this.$refs["CategoryForm"].validate((valid) => {
        if (valid) {
          if (this.CategoryForm.businessType === "E") {
            this.UpdateCategorys();
          } else if (this.CategoryForm.businessType === "N") {
            this.CreateCategorys();
          } else if (this.CategoryForm.businessType === "C") {
            this.CreateCategorys();
          }
        } else {
          return false;
        }
      });
    },

    // 新增
    CreateCategorys() {
      let CategoryForm = JSON.parse(JSON.stringify(this.CategoryForm));
      CategoryForm.categoryMoneyDateType = this.CategoryForm.dateType;
      delete CategoryForm.dateType;
      CreateCategoryAmount(CategoryForm)
        .then((res) => {
          const { code } = res;
          if (code === 0) {
            this.Canceluser();
            this.$message.success("操作成功");
            this.getList();
          }
        })
        .catch((err) => {});
    },

    // 编辑
    UpdateCategorys() {
      let CategoryForm = JSON.parse(JSON.stringify(this.CategoryForm));
      CategoryForm.categoryMoneyDateType = this.CategoryForm.dateType;
      delete CategoryForm.dateType;
      EditCategoryMoney(CategoryForm)
        .then((res) => {
          const { code } = res;
          if (code === 0) {
            this.Canceluser();
            this.$message.success("操作成功");
            this.getList();
          }
        })
        .catch((err) => {});
    },

    // 新建类目
    NewUser() {
      this.categoryVisible = true;
      this.title = "新增类目金额";
      this.CategoryForm.dateType = "Y";
      this.CategoryForm.categoryMoneyId = "";
      this.CategoryForm.businessType = "N";
    },

    // 编辑类目
    edit(row) {
      this.categoryVisible = true;
      this.title = "编辑类目金额";
      this.CategoryForm.categoryMoneyId = row.categoryMoneyId;
      this.getCategorys(row.categoryMoneyId, "E");
      this.getalls();
    },

    // 复制
    Copy(row) {
      this.categoryVisible = true;
      this.title = "复制类目金额";
      this.getCategorys(row.categoryMoneyId, "C");
    },

    // 表单重置
    resetFormData(formName) {
      this.$refs[formName].resetFields();
    },

    // 删除
    DelUser(row) {
      this.$confirm("确认要删除该条类目金额吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          DeleteCategoryAmount({ categoryMoneyId: row.categoryMoneyId })
            .then((res) => {
              const { code } = res;
              if (code === 0) {
                this.getList();
                this.$modal.msgSuccess("操作成功");
              }
            })
            .catch(() => {});
        })
        .catch(() => {});
    },
  },
};
</script>

<style lang="scss" scoped>
.w-200 {
  width: 200px;
  background: #ffffff;
  border-radius: 4px;
}

.client_name {
  font-size: 14px;
  font-weight: 400;
  color: #0052d9;
}

.give {
  height: 40px;
  font-size: 14px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.85);
  margin-top: 40px;
  line-height: 40px;
}

.el-form-item {
  margin-bottom: 20px;
}

.recharge_form {
  padding: 10px 24px;
}

.memberName {
  font-size: 14px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.85);
}
.el_row_item {
  margin-bottom: 10px;
}
.el_row_date {
  margin-top: 20px;
}
.el_row_reason {
  margin-top: 10px;
}

.el_row_date {
  .el-form-item {
    margin-bottom: 0px;
  }
}
.source_box {
  margin: 10px 24px;
}
.ipt_left {
  padding-right: 25px;
}
.repeat {
  margin-left: 20px;
}

.totalSum {
  font-size: 17px;
  font-weight: bold;
  padding-left: 15px;
}

.MoneyBox {
  display: flex;
  .betweenIcon {
    margin: 0 20px;
  }
}
</style>
